<template>
  <div
    class="moe-card"
    :class="[
      {
        'moe-card--bordered': bordered,
        'moe-card--shadow': shadow,
        'moe-card--hover': hover
      }
    ]"
  >
    <div v-if="title || $slots.title" class="moe-card__header">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="moe-card__content">
      <slot></slot>
    </div>
    <div v-if="$slots.footer" class="moe-card__footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义组件属性
const props = defineProps({
  /**
   * 卡片标题
   */
  title: {
    type: String,
    default: ''
  },
  /**
   * 是否显示边框
   */
  bordered: {
    type: Boolean,
    default: false
  },
  /**
   * 是否显示阴影
   */
  shadow: {
    type: Boolean,
    default: true
  },
  /**
   * 是否有悬停效果
   */
  hover: {
    type: Boolean,
    default: false
  }
});
</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';

.moe-card {
  background-color: var(--bg-color);
  border-radius: $border-radius-lg;
  overflow: hidden;
  transition: all $transition-normal;

  // 边框样式
  &--bordered {
    border: $border-width-xs solid $neutral-200;
  }

  // 阴影样式
  &--shadow {
    box-shadow: $shadow-md;
  }

  // 悬停效果
  &--hover {
    &:hover {
      transform: translateY(-2px);
      box-shadow: $shadow-lg;
    }
  }

  // 头部样式
  &__header {
    padding: $spacing-4 $spacing-5;
    border-bottom: $border-width-xs solid $neutral-200;
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: var(--text-color);
  }

  // 内容样式
  &__content {
    padding: $spacing-5;
    color: var(--text-color);
  }

  // 底部样式
  &__footer {
    padding: $spacing-4 $spacing-5;
    border-top: $border-width-xs solid $neutral-200;
    display: flex;
    justify-content: flex-end;
    gap: $spacing-3;
  }
}
</style>